<template>
  <el-card style="width:1000px; margin:0 auto;">
    <div slot="header">工厂信息</div>
    <el-form size="mini" ref="form" :model="formData" :rules="rules" label-width="120px" status-icon>
      <el-form-item label="名称" prop="name">
        <el-input placeholder="请输入名称" v-model.trim="formData.name" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="tel">
        <el-input placeholder="请输入电话" v-model.trim="formData.tel" auto-complete="off" maxlength="11"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input type="textarea" :rows="2" placeholder="请输入地址" v-model.trim="formData.address" auto-complete="off" maxlength="100"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit()" v-waves>确定</el-button>
        <el-button type="danger" @click="changePassword.show = true" v-waves>修改确认密码</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      title="修改确认密码"
      :visible.sync="changePassword.show"
      width="40%"
    >
      <el-form
        size="mini"
        ref="changePasswordForm"
        :model="changePassword.formData"
        :rules="changePassword.rules"
        label-width="120px"
        status-icon
      >
        <el-form-item label="登录密码" prop="password">
          <el-input
            type="password"
            placeholder="请输入登录密码"
            v-model="changePassword.formData.password"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="原确认密码" prop="oldConfirmPassword">
          <el-input
            type="password"
            placeholder="请输入原确认密码"
            v-model="changePassword.formData.oldConfirmPassword"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="新确认密码" prop="newConfirmPassword">
          <el-input
            type="password"
            placeholder="请输入确认密码"
            v-model="changePassword.formData.newConfirmPassword"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="再次输入密码" prop="checkConfirmPassword">
          <el-input
            type="password"
            placeholder="请再次输入确认密码"
            v-model="changePassword.formData.checkConfirmPassword"
            auto-complete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="changePassword.show = false"
          >取消</el-button
        >
        <el-button
          size="mini"
          type="primary"
          @click="handleDoChangeConfirmPassword"
          :loading="changePassword.loading"
          >{{ changePassword.loading ? "提交中" : "确定" }}</el-button
        >
      </span>
    </el-dialog>
  </el-card>
</template>

<style scoped>
.el-form {
  margin: 20px;
}
</style>

<script>
import waves from '@/directive/waves' // 水波纹指令
import factoryApi from '@/api/factory'

export default {
  directives: {
    waves
  },
  data () {
    return {
      formData: {
        name: '',
        tel: '',
        address: ''
      },
      rules: {
        name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === '' || typeof value === 'undefined') {
                callback(new Error('请输入名称'))
              } else if (value.length > 50) {
                callback(new Error('名字长度需在1到50之间'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        tel: [{
          validator: (rule, value, callback) => {
            if (value && (value.length > 11)) {
              callback(new Error('电话号码长度不超过11位'))
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }],
        address: [{
          validator: (rule, value, callback) => {
            if (value && (value.length > 100)) {
              callback(new Error('地址长度不超过100个字符'))
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }]
      },
      changePassword: {
        formData: {
          password: '',
          oldConfirmPassword: '',
          newConfirmPassword: '',
          checkConfirmPassword: ''
        },
        show: false,
        loading: false,
        rules: {
          password: [
            {
              required: true,
              trigger: 'blur'
            }
          ],
          newConfirmPassword: [
            {
              required: true,
              validator: (rule, value, callback) => {
                if (value === '') {
                  callback(new Error('请输入新确认密码'))
                } else if (value.length < 8 || value.length > 10) {
                  callback(new Error('密码长度需在8到10之间'))
                } else {
                  if (this.changePassword.formData.checkConfirmPassword !== '') {
                    this.$refs.changePasswordForm.validateField(
                      'checkConfirmPassword'
                    )
                  }
                  callback()
                }
              },
              trigger: 'blur'
            }
          ],
          checkConfirmPassword: [
            {
              required: true,
              validator: (rule, value, callback) => {
                if (value === '') {
                  callback(new Error('请再次输入新确认密码'))
                } else if (value.length < 8 || value.length > 10) {
                  callback(new Error('密码长度需在8到10之间'))
                } else if (value !== this.changePassword.formData.newConfirmPassword) {
                  callback(new Error('两次输入确认密码不一致'))
                } else {
                  callback()
                }
              },
              trigger: 'blur'
            }
          ]
        }
      }
    }
  },
  methods: {
    /**
     * 提交数据
     */
    handleSubmit () {
      this.$refs.form.validate().then(valid => {
        if (valid) {
          factoryApi.updateFactory(this.formData).then(response => {
            this.$notify({
              title: '成功',
              message: '信息修改成功',
              type: 'success'
            })
            location.reload()
          })
        }
      })
    },
    /**
     * 获取工厂数据
     */
    getFactory () {
      factoryApi.getFactory().then(response => {
        this.formData.name = response.data.name
        this.formData.tel = response.data.tel
        this.formData.address = response.data.address
      })
    },
    /**
     * 修改确认密码
     */
    handleDoChangeConfirmPassword () {
      this.$refs.changePasswordForm.validate().then(valid => {
        this.changePassword.loading = true
        factoryApi.updateConfirmPassword(this.changePassword.formData.password, this.changePassword.formData.oldConfirmPassword, this.changePassword.formData.newConfirmPassword).then(() => {
          this.changePassword.show = false
          this.changePassword.formData.password = ''
          this.changePassword.formData.oldConfirmPassword = ''
          this.changePassword.formData.newConfirmPassword = ''
          this.changePassword.loading = false
          this.$notify({
            title: '成功',
            message: '确认密码修改成功',
            type: 'success'
          })
        }).catch(() => {
          this.changePassword.loading = false
        })
      })
    }
  },
  mounted () {
    this.getFactory()
  }
}
</script>
